import { getItem, setItem } from '@/utils/storage'
import type { ConfigState } from '@/store/type/config'
import i18n from '@/locale'
import screenfull from 'screenfull'

export default {
  namespaced: true,
  state: () => ({
    menuExpand: String(getItem('menuExpand') || 'true'), // 菜单展开
    theme: getItem('theme', true) || 'auto', // 主题
    contentFull: String(getItem('contentFull') || 'false'), // 内容充满全屏
    locale: getItem('locale', true) || 'zhCn', // 国际化设置
    screenFull: screenfull.isFullscreen // 全屏
  }),
  getters: {},
  mutations: {
    setMenuExpand (state: ConfigState, payload: string) {
      state.menuExpand = payload
      setItem('menuExpand', payload)
    },
    toggleTheme (state: ConfigState) {
      state.theme = state.theme === 'auto' ? 'dark' : 'auto'
      const html = document.getElementsByTagName('html')[0]
      html.setAttribute('class', state.theme)
      setItem('theme', state.theme, true)
    },
    setContentFull (state: ConfigState, payload: string) {
      state.contentFull = payload
      setItem('contentFull', payload)
    },
    toggleLocale (state: ConfigState) {
      let locale = state.locale
      locale = locale === 'zhCn' ? 'en' : 'zhCn'
      i18n.global.locale.value = locale
      state.locale = locale
      setItem('locale', locale, true)
    },
    toggleSceenFull (state: ConfigState) {
      screenfull.toggle()
      state.screenFull = screenfull.isFullscreen
    }
  },
  actions: {}
}
